<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20220923</title>
	</head>
	<body>
		
		
	
		
		
		<!-- 按钮播放和暂停转化 -->
		<!-- <input type="button" value="播放">
		<script>
			let input=document.querySelector('input');
			input.onclick=function(){
				if(input.value==='播放'){
					input.value='暂停';
				}
				else if(input.value==='暂停'){
					input.value='播放';
				}
			}
		</script> -->
		
		
		

		
		
		
		
		<!-- <img src="img/logo2.jpg" alt="">
		<script>
			let img=document.querySelector('img');
			img.onclick=function(){
				console.log(img.src);
				//一个HTML标签里能写哪些属性 就同样可以通过js中的DOM对象来获取到一样的属性
				if(img.src.indexOf('img/logo2.jpg')>=0){
					img.src='img/doge.png';
				}
				else if(img.src.indexOf('img/doge.png')>=0){
					img.src='img/logo2.jpg';
				}
				//可以通过console.dir这个方法 打印出一个dom对象的全部属性和值
				console.dir(img);
			}
		</script> -->
		
		
		
		
		
		
		
		
		<!-- 一个div显示整数 有一个按钮 每次点击这个按钮 就让里面的整数+1 -->
		<!-- <div id="screen">
			0
		</div>
		<button id="btn">
			+1按钮
		</button>
		<script>
			let btn=document.querySelector('#btn');
			btn.onclick=function(){
				//获取screen值
				let sc=document.querySelector('#screen');
				let val=sc.innerHTML;
				//默认获取的是字符串类型
				console.log(typeof(val));
				//要想数字相加 得转换类型
				val=parseInt(val);
				//值+1 
				val+=1;
				//将新值写回去
				sc.innerHTML=val;
			}
		</script> -->
		
		
		
		
		
		
		
		<!-- <div id="screen">hello world</div>
		<div id="screen1">
			<ul>
				<li>qwe</li>
				<li>asd</li>
				<li>zxc</li>
			</ul>
		</div>
		
		<button id="btn">这是一个获取内容按钮</button>
		<button id="btn2">这是一个修改的按钮</button>
		<script>
			let btn=document.querySelector('#btn');
			btn.onclick=function(){
				let sc1=document.querySelector('#screen');
				console.log(sc1.innerHTML);
				let sc2=document.querySelector('#screen1');
				console.log(sc2.innerHTML);
			}
			
			let btn2=document.querySelector('#btn2');
			btn2.onclick=function(){
				let sc3=document.querySelector('#screen');
				sc3.innerHTML='这是修改后的内容';
			}
		</script> -->
		
		
		
		
		
		
		
		
		
		
		
		
		<!-- 事件 
		三个要素
		1.事件源：哪个HTML元素产生的事件
		2.事件类型：鼠标移动 鼠标点击 键盘事件 窗口大小改变事件...
		3.事件处理程序：当事件产生之后 执行啥样的js代码-->
		
		<!-- <button>这是一个按钮</button>
		<script>
			let button=document.querySelector('button');
			button.onclick=function(){
				alert('helloo');
			}
		</script> -->
		
		
		

		
		
		
		
		<!-- <div class="one">
			hello one
		</div>
		<div class="two">
			hello two
		</div>
		
		<ol>
			<li>helloo</li>
		</ol>
		
		<ul>
			<li>猫哥</li>
			<li>狗哥</li>
			<li>asd</li>
		</ul>
		<script>
			//querySelector参数就是一个scc的选择器
			let ob=document.querySelector('.one');
			console.log(ob);
			
			let ob1=document.querySelector('ol li');
			console.log(ob1);
			
			let ob2=document.querySelector('ul li');
			console.log(ob2);
			//当querySelector的参数的选择器匹配到了多个元素的时候，
			//此时返回对象就是匹配结果中的第一个元素
			//如果我们想把这些li都选中 就需要使用querySelectorAll
			//querySelectorAll返回的是一个数组 就包含了所有被选中的元素
			let ob3=document.querySelectorAll('ul li');
			console.log(ob3);
			// 准确的说querySelectorAll返回的不是一个真正的原生数组。而是一个对象只不过这个对象有length,也能够通过下标的方式来访问内部元素.
			// 这样的对象使用起来和数组非常相似(-模-样)称为“伪数组"
		</script> -->
		
		
		
		
		
		
		
		
		
		
		<!-- <script>
		
			//js对象
			// let st={
			// 	name:'蔡坤',
			// 	age:20,
			// 	height:180,
			// 	weight:120,
				
			// 	sing:function(){
			// 		console.log('鸡你太美');
			// 	},
			
			// 	jump:function(){
			// 		console.log('抖肩舞');
			// 	},
			// }
			// console.log(st.name);
			// console.log(st.age);
			// st.sing();
			// //常用的
			
			
			
			// let student = new Object();
			//  // 和创建数组类似 js中一个对象中有哪些成员，也都可以动态改变的
			//  student.name = "蔡坤";
			//  student.height = 175;
			//  student['weight'] = 170;
			//  student.sing = function (){
			// 	console.log("hello");
			// }
			// console.log(student.name);
			// console.log(student['weight']);
			// student.sing();
			


	
			
			
			
			// let num=10;
			// function hello2(){
			// 	function hello(){
			// 		console.log(num);
			// 	}
			// 	hello();
			// } 
			// hello2();
			
			// js中的作用域是支持"逐级向上"（从里向外找）查找的. 如果在hello2里有num=20 那么结果就为20
			// 当前是在hello这个函数里，尝试打印num.但是在hello中没有num变量~~
			// 于是就往上级找 找到了hello2这里
			// 但是在hello2里也没有num~~
			// 于是继续往上找找到了全局作用域找到了num
			// (如果最后的全局作用域也没找到，就会报错)
			// 这就叫作用域链
			 
			
			
			
			
			
			
			
			
			// function hello(){
			// 	console.log('helloworld');
			// }
			// let f=hello;
			// console.log(typeof f);
			// //这里的hello没有括号 它是一函数名 说明这个操作不是函数调用 
			// //而只是一个单纯的函数的赋值 f的typeof(类型是)function类型的变量
			// //通过f()也可以执行hello()  function() { } 这样的写法定义了一个匿名函数, 然后将这个匿名函数用一个变量来表示.
			// f();
			
			// //还可以两个操作合并一起 既定义了hello这个函数也把它赋值给了f
			// let f = function hello(){
			// 	console.log('helloworld');
			// }
			
			// //也可以将hello去掉 但只能依赖f来调用这个函数(常用)
			// let f = function (){
			// 	console.log('helloworld');
			// }
			
			
			
			
			
			
			
			// function add(a,b,c,d,e,f){
			// 	return a+b+c+d+e+f;
			// }
			// let a=add(10,10,10);
			// console.log(a);
			// let b=add(10,10,10,10,10);
			// console.log(b);
			// //实参比形参少 没被传参到的形参，就是undefined;最后结果为NaN
			// //如果实参比形参多 多出来的实参相当于没了 函数内部拿不到
			
			//  function add1(a,b,c,d,e,f){
			// 	 a=a||0;
			// 	 b=b||0;
			// 	 c=c||0;
			// 	 d=d||0;
			// 	 e=e||0;
			// 	 f=f||0;
			//  	return a+b+c+d+e+f;
			//  }
			//  let a1=add1(10,10,10);
			//  console.log(a1);
			//  let b1=add1(10,10,10,10,10);
			//  console.log(b1);
			 
			  
			
				
			
			
			//定义函数也不需要写参数类型
			// function add(x,y){
			// 	return x+y;
			// }
			// let a=add(10,20);
			// console.log(a);
			// let b=add('hello','world');
			// console.log(b);
			// let c=add('hello',20);
			// console.log(c);
			
			
			
			
			
			// function hello(){
			// 	console.log('hello');
			// }
			// hello();
			// hello();
			// hello();
			
		</script> -->
		
		
		
		
	</body>
</html>
